<template>
    <div class="hpx_table">
        <el-table 
                :data="tableData.body"
                @selection-change="selectionChange"
                :cell-class-name="calcStyle"
            >
            <el-table-column
                v-if="isIndex"
                type="index" 
                label="序号"
                width="60"
            >
            </el-table-column>
            <el-table-column
                v-if="isSelect || isBatchSelect"
                type="selection"
                :selectable="checkSelectable"
                width="50"
            >
            </el-table-column>
            <el-table-column
                v-for="item in tableData.header"
                :key="item.key"
                :label="item.label"
                :prop="item.key"
                :formatter="item.formatter"
            >
            </el-table-column>
            <el-table-column
                v-if="operation"
                label="操作"
            >
                <template slot-scope="scope">
                    <slot :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="pagination" v-if="isSelect || isBatchSelect || pagination">
            <!-- <el-button type="primary" size="small" class="delete_btn" v-if="isSelect" :disabled="selectionArr.length == 0" @click="delate()">删除</el-button>
            <el-button type="primary" size="small" class="delete_btn" v-if="isBatchSelect" :disabled="selectionArr.length == 0" @click="batchBtn()">批量发布</el-button> -->
            <el-pagination
                v-if="pagination"
                @current-change="change"
                @size-change="changes"
                :current-page="tableData.footer.currentPage"
                :page-sizes="[10, 15, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.footer.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'

    @Component
    export default class Table extends Vue {     
           
        @Prop() tableData!:object
        //是否有操作一栏
        @Prop({  
            default: true
        }) operation!: boolean
        //是否有分页
        @Prop({
            default: true
        }) pagination!: boolean
        //是否有勾选
        @Prop({
            default: false
        }) isSelect!: boolean
        @Prop({
            default: false
        }) isBatchSelect!: boolean
        //是否有序号
        @Prop({
            default: false
        }) isIndex!: boolean
        //表名
        @Prop({
            default: ''
        }) tableName!: string
        //勾选操作类型
        @Prop({
            default: ''
        }) operateType!: string

        // selectionArr:any = []
        
        //当前页码
        @Emit()  
        change (currentPage:number) {}  

        //每页显示条数
        @Emit()
        changes (val:number) {} 
        
        //methods
        //勾选
        selectionChange(item) {
            // this.selectionArr = item
            this.$emit('selection',item)
        }
        //删除
        // delate () {
        //     this.$emit('remove')
        // }
        // 批量发布
        // batchBtn () {
        //     this.$emit('batchPublish')
        // }
        //满足条件的的才可以勾选删除
        checkSelectable(row) {
            if(!this.tableName) return true
            if(this.tableName == 'myBillTable'){
                if(this.operateType == 'delete') return row.bill_status_name == '未发布' || row.bill_status_name == '审核失败'
                if(this.operateType == 'publish') return row.bill_status_name == '未发布'
            }
            if(this.tableName == 'myBidding') return row.bid_status != '竞价成功'
            if(this.tableName == 'orderList') return row.order_status_name != '交易中'
            if(this.tableName == 'discountOrder') return row.statusName != '待提票' && row.statusName != '审核中'
        }

        calcStyle ({column,row}) {
            // if(column.label == '报价利率/每十万加'){
            //     return 'red'
            // }
            if(this.tableName == 'myBillTable') {
                if(column.label == '状态' && (row.bill_status_name == '交易中止' || row.bill_status_name == '审核失败' || row.bill_bidding_size == 0)) return 'gray'
                if(column.label == '状态' && (row.bill_bidding_size > 0 || row.bill_status_name == '待审核' || row.bill_status_name == '未发布' || row.bill_status_name == '交易中')) return 'red'
                if(column.label == '状态' && row.bill_status_name == '交易完成') return 'green'
                if(column.label == '每十万扣') return 'red'
            }
            if(this.tableName == 'orderList') {
                if(column.label == '状态' && (row.order_status_name == '交易完成' || row.order_status_name == '交易中止')) return 'gray'
                if(column.label == '状态' && (row.order_status_name == '待背书' || row.order_status_name == '待支付' || row.order_status_name == '待签收')) return 'red'
                if(column.label == '每十万扣') return 'red'
            }
            if(this.tableName == 'myBidding') {
                if(column.label == '状态' && row.bid_status == '竞价成功') return 'green'
                if(column.label == '状态' && row.bid_status == '竞价中') return 'red'
                if(column.label == '状态' && (row.bid_status == '竞价失败' || row.bid_status == '询价失效')) return 'gray'
                if(column.label == '报价利率/每十万加') return 'red'
            }
            if(this.tableName == 'discountOrder') {
                if(column.label == '利率' || column.label == '每十万扣') return 'red'
                if(column.label == '订单状态' && (row.statusName == '交易成功' || row.statusName == '审核失败' || row.statusName == '提票失败' || row.statusName == '已取消' || row.statusName == '过期')) return 'gray'
                if(column.label == '订单状态' && (row.statusName == '待提票' || row.statusName == '审核中')) return 'red'
            }
            if(this.tableName == 'tradeOrders'){
                if(column.label == '每十万扣' || column.label == '状态') return 'red'
            }
            if(this.tableName == 'draftBeans'){
                if(column.label == '收入(个)' && row.income != '0') return 'yellow'
                if(column.label == '支出(个)' && row.expenditure != '0') return 'red'
            }
        }
    }

</script>

<style lang="scss" scoped>
    .pagination{
        padding: 20px 0;
        // display: flex;
        // justify-content: flex-end;
        position: relative;
        .el-pagination {
            position: absolute;
            right: 0;
        }
        .delete_btn{
            position: absolute;
            left: 0;
        }
    }
</style>
<style lang="scss">
    .el-table .cell{
        text-align: center;
    }
    .red{
        color: $__color-remind;
    }
    .blue{
        color: $__color-link;
    }
    .green{
        color: $__color-success-remind;
    }
    .gray{
        color: $__color-bg-gotop;
    }
    .yellow{
        color: $__color-primary;
    }
    .el-table__row--striped{
        background-color: $__color-bg-primary !important;
    }
</style>